import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import { $t } from '#/locales';

export const formState = ref<any>(null);

/**
 * 表格查询表单
 */
export function queryFormSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      fieldName: 'account',
      label: $t('system.user.account'),
    },
    {
      component: 'Input',
      fieldName: 'realName',
      label: $t('system.user.realName'),
    },
    {
      component: 'Input',
      fieldName: 'phone',
      label: $t('system.user.phone'),
    },
    {
      component: 'Input',
      fieldName: 'posName',
      label: $t('system.user.posName'),
    },
  ];
}

/**
 * 表格列
 */
export function useColumns<T = SystemRoleApi.SystemRole>(
  onActionClick: OnActionClickFn<T>,
  onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
): VxeTableGridOptions['columns'] {
  return [
    {
      type: 'seq',
      title: $t('table.seq'),
      width: 70,
    },
    {
      // align: 'center',
      field: 'avatar',
      title: $t('system.user.avatar'),
      width: 80,
      slots: {
        default: 'avatar',
      },
    },
    {
      field: 'account',
      title: $t('system.user.account'),
      minWidth: 150,
    },
    {
      field: 'realName',
      title: $t('system.user.realName'),
      width: 200,
    },
    {
      field: 'phone',
      title: $t('system.user.phone'),
      width: 150,
    },
    {
      cellRender: {
        attrs: { beforeChange: onStatusChange },
        name: onStatusChange ? 'CellSwitch' : 'CellTag',
      },
      field: 'status',
      title: $t('system.role.status'),
      width: 150,
    },
    {
      cellRender: {
        name: 'CellTag',
        options: getDictTypeOptions('AccountTypeEnum'),
      },
      field: 'accountType',
      title: $t('system.user.accountType'),
      width: 120,
    },
    {
      align: 'center',
      cellRender: {
        attrs: {
          nameField: 'name',
          onClick: onActionClick,
        },
        name: 'CellOperation',
        options: [
          'edit', // 默认的编辑按钮
          'delete', // 默认的删除按钮
          {
            code: 'resetPassword',
            text: $t('system.user.resetPassword'),
            icon: 'carbon:reset',
          },
        ],
      },
      field: 'operation',
      fixed: 'right',
      showOverflow: false,
      title: $t('system.menu.operation'),
      width: 200,
    },
  ];
}

/**
 * 表单
 */
export function useFormSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      fieldName: 'account',
      label: $t('system.user.account'),
      rules: 'required',
      componentProps: {
        allowClear: true,
      },
    },
    {
      component: 'Input',
      fieldName: 'nickName',
      label: $t('system.user.nickName'),
      rules: 'required',
      componentProps: {
        allowClear: true,
      },
    },
    {
      component: 'Input',
      fieldName: 'phone',
      label: $t('system.user.phone'),
      rules: 'required',
      componentProps: {
        allowClear: true,
      },
    },
    {
      component: 'Input',
      fieldName: 'realName',
      label: $t('system.user.realName'),
      rules: 'required',
      componentProps: {
        allowClear: true,
      },
    },
    {
      component: 'Select',
      fieldName: 'accountType',
      label: $t('system.user.accountType'),
      rules: 'required',
      componentProps: {
        allowClear: true,
        class: 'w-full',
        options: (() => {
          const dictType = getDictTypeOptions('AccountTypeEnum');
          var options = dictType.filter(
            (item: any) => item.code !== 'SuperAdmin',
          );
          return options;
        })(),
      },
    },
    {
      component: 'Input',
      fieldName: 'email',
      label: $t('system.user.email'),
      componentProps: {
        allowClear: true,
      },
    },
    {
      component: 'InputNumber',
      fieldName: 'orderNo',
      label: $t('system.user.orderNo'),
      componentProps: {
        class: 'w-full',
      },
      defaultValue: 100,
    },
    {
      component: 'RadioGroup',
      fieldName: 'status',
      label: $t('system.role.status'),
      componentProps: {
        buttonStyle: 'solid',
        options: [
          { label: $t('common.enabled'), value: 1 },
          { label: $t('common.disabled'), value: 2 },
        ],
        optionType: 'button',
      },
      defaultValue: 1,
    },
    {
      component: 'Divider',
      fieldName: 'org',
      formItemClass: 'col-span-2 md:col-span-2 pb-0',
      hideLabel: true,
      renderComponentContent() {
        return {
          default: () => $t('system.user.org'),
        };
      },
    },
    {
      component: 'ApiTreeSelect',
      fieldName: 'orgId',
      label: $t('system.user.belongOrg'),
      componentProps: {
        class: 'w-full',
        allowClear: true,
        showSearch: true,
        treeDefaultExpandAll: true,
        treeNodeFilterProp: 'name',
        // treeNodeLabelProp:'name',
        api: getOrgList,
        afterFetch: (data: any) => {
          if (formState.value?.tenantId) {
            data = data.filter(
              (item: any) => item.tenantId === formState.value.tenantId,
            );
          }
          return data;
        },
        childrenField: 'children',
        labelField: 'name',
        valueField: 'id',
      },
      dependencies: {
        componentProps(values) {
          if (values.orgId === 0) {
            values.orgId = undefined;
            return values;
          }
          return {};
        },
        triggerFields: ['orgId'],
      },
    },
    {
      component: 'ApiSelect',
      fieldName: 'posId',
      label: $t('system.user.pos'),
      componentProps: {
        allowClear: true,
        class: 'w-full',
        api: getPosList,
        afterFetch: (data: any) => {
          if (formState.value?.tenantId) {
            data = data.filter(
              (item: any) => item.tenantId === formState.value.tenantId,
            );
          }
          return data;
        },
        fieldNames: {
          label: 'name',
          value: 'id',
        },
      },
      dependencies: {
        componentProps(values) {
          if (values.posId === 0) {
            values.posId = undefined;
            return values;
          }
          return {};
        },
        triggerFields: ['posId'],
      },
    },
    {
      component: 'Input',
      fieldName: 'jobNum',
      label: $t('system.user.jobNum'),
      componentProps: {
        allowClear: true,
      },
    },
    {
      component: 'Input',
      fieldName: 'domainAccount',
      label: $t('system.user.domainAccount'),
      componentProps: {
        allowClear: true,
      },
    },
    {
      component: 'Divider',
      fieldName: 'subOrg',
      formItemClass: 'col-span-2 md:col-span-2 pb-0',
      hideLabel: true,
      renderComponentContent() {
        return {
          default: () => $t('system.user.subOrg'),
        };
      },
    },
    {
      component: 'Input',
      fieldName:'addSubOrg',
      modelPropName: 'modelValue',
      formItemClass: 'col-span-2 md:col-span-2 pb-0',
    },
  ];
}
